<template>
  <div class="page_account" id="account_login">
    <div class="warp">
      <div class="container">
        <div class="row flex_cc">
          <div class="col-12 col-md-6">
            <div class="card flex_cc">
              <div class="form_login ">
                <b-form>
                  <b-form-group
                    id="input-group-1"
                    label="username:"
                    label-for="input-1"
                    :state="validation_username"
                    invalid-feedback="账户名长度为在5-16个字符"
                    valid-feedback="校验通过"
                  >
                    <b-form-input
                      id="input-1"
                      v-model="form.username"
                      type="text"
                      placeholder="用户名"
                      trim
                    ></b-form-input>
                  </b-form-group>

                  <b-form-group
                    id="input-group-2"
                    label="password:"
                    label-for="input-2"
                    :state="validation_password"
                    invalid-feedback="密码长度为在5-16个字符"
                    valid-feedback="校验通过"
                  >
                    <b-form-input
                      id="input-2"
                      v-model="form.password"
                      type="password"
                      placeholder="密码"
                      trim
                    ></b-form-input>
                  </b-form-group>
                  <div class="btns_bottom">
                    <div class="btn_item" @click="submit()">登录</div>
                    <div class="forgot_nav" @click="$nav('/account/forgot')">
                      忘记密码
                    </div>
                  </div>
                </b-form>
              </div>
            </div>
          </div>
          <div class="col-12 col-md-6">
            <div class="card flex_cc">
                <div class="more_nav">
                  <div style="text-align: center; margin-bottom: 20px">
                    没有账户?
                  </div>
                  <div class="btn_item" @click="$nav('/account/register')">
                    创建一个账户
                  </div>
                </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import mixin from "../../mixins/page.js";

export default {
  mixins: [mixin],
  data() {
    return {
      form: {
        username: "",
        password: "",
      },
    };
  },
  methods: {
    // 提交
    submit() {
      var condition = this.validation_username && this.validation_password;
      if (!condition) {
        this.$toast("输入不合法");
        return;
      }
      this.$post("~/api/login?", this.form, (res) => {
        if (res.result) {
          this.$store.commit("user_set", res.result);
          if (this.remember_me) {
            $.db.set("account", account);
          }
          this.$get_auth(this.user.user_group);
          this.$nav("/");
        } else if (res.error) {
          this.$toast(res.error.message);
        }
      });
    },
  },
  computed: {
    // 验证用户名
    validation_username() {
      var length = this.form.username.length;
      if (!length) {
        return null;
      }
      return length > 4 && length < 17;
    },
    // 验证密码
    validation_password() {
      var length = this.form.password.length;
      if (!length) {
        return null;
      }
      return length > 4 && length < 17;
    },
  },
};
</script>

<style scoped>
.card{
  word-wrap: break-word;
  background-color: #fff;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.page_account {
  min-height: 600px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.flex_cc {
  display: flex;
  justify-content: center;
  align-items: center;
}
.form_login {
  width: 80%;
}

.more_nav {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  width: 80%;
}

.more_nav .btns_bottom {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.btn_item {
  cursor: pointer;
  width: 100%;
  background-color: var(--color_primary);
  color: #fff;
  text-align: center;
  height: 48px;
  line-height: 48px;
}
.forgot_nav {
  text-align: left;
  font-size: 10px;
  margin-top: 20px;
  cursor: pointer;
}
</style>
